﻿body {
}

:root {
    /*行高 控制上下居中用*/
    --img-line-height: 149px;
    /*边框颜色*/
    --borderColor: #c5c5c5;
    /*字间距 需要同时控制偏移*/
    --textSpacing: 20px;
    --title: "登录";
    --sayword: "欢迎光临，请输入您的用户名和密码";
}

/*登录框*/
#window1.f-shadow {
    box-shadow: 3px 15px 15px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .04);
}

#window1, #window1 .f-panel-body {
    border-color: var(--borderColor);
    border-radius: 8px;
}

/*顶部图*/
#window1 #img .f-panel-body {
    border-color: var(--borderColor);
    border-radius: 8px 0px;
    background-image: url('/login/1.jpg');
    background-repeat: no-repeat;
    display: table;
    background-size: 100%;
    /*background-size:100% 100%;*/
}

#window1 #img .f-panel-body:before {
    content: var(--title);
    position: absolute;
    color: #fff;
    font-size: 45px;
    letter-spacing: var(--textSpacing);
    text-indent: var(--textSpacing);
    height: 100%;
    width: 100%;
    display: block;
    background-color: rgba(119,136,153,.6);
    line-height: var(--img-line-height);
    text-align: center;
}

/*表单*/
#window1 #form1 .f-field:nth-child(2) {
    margin-top: 20px;
}

#window1 #form1 .f-field input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius:0px;
}

/*按钮*/
#window1 #btnlogin {
    transition: all .3s;
    margin-top: 20px;
    margin-left: 100px;
    border: none;
    padding: 10px 40px;
    border-radius: 20px;
    color: #fff;
    background-color: #00CD66;
}

#window1 #btnlogin.f-state-hover {
    background-color: #00EE76;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .04);
}

#window1 #btnlogin:active {
    background-color: #00CD66;
    box-shadow: none;
}


#window2{
    margin-left:180px !important; /*偏移 会导致计算出错！*/
    border-color:#474a59;
}
#window2.f-shadow {
    /*阴影*/
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .04);
}

/*白块*/
#window2:before {
    content: var(--title);
    color: #333;
    position: absolute;
    width: 80%;
    height: 80%;
    margin-left: calc(-80% - 1px) ;
    padding-left:40px;
    top: 10%;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: -5px 7px 16px 0px rgba(0, 0, 0, 0.2);
    line-height: var(--img-line-height);
    letter-spacing: 6px;
    font-size: 2rem;
    font-weight:600;
}
/*登录下的 提示文字 需要单独设置所以放到after下*/
#window2:after {
    content: var(--sayword);
    position: absolute;
    width: 70%;
    margin-left: -80%;
    top: 45%;
    color: #a7a7a7;
    font-size: 1rem;
    padding-left: 40px;
}

/*背景色*/
#window2 .f-widget-content {
    background-color: #474a59;
}

/*输入框 只保留下边框*/
#window2 #form2 .f-field input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;

    border-color:aliceblue;
}


#window2 #form2 .f-panel-body {
    /*保证按钮居中用*/
    display: flex;
    flex-direction: column;
}
/*第二个控件间距*/
#window2 #form2 .f-fieldlabel-text {
    color:#fff;
}
/*第二个控件间距*/
#window2 #form2 .f-field:nth-child(2) {
    margin-top: 10px;
}

/*按钮样式*/
#window2 #btnlogin2 {
    transition: all .3s;
    margin-top: 20px;
    border: none;
    padding: 10px 40px;
    background-color: #474a59;
    align-self: center;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #a7a7a7;
}
/*按钮图标先隐藏*/
#window2 #btnlogin2 .f-btn-icon{
    transition: all .3s;
    opacity:0;
    margin-left:-0.7rem;
    color: #a7a7a7;
}
/*按钮获取焦点时 显示阴影*/
#window2 #btnlogin2.f-state-hover {
    letter-spacing: 6px;
    color: #fff;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, .3);
}
/*按钮获取焦点时 显示图标*/
#window2 #btnlogin2.f-state-hover .f-btn-icon{
    opacity:1;
    margin-left:.5rem;
    color: #fff;
}
/*按下时*/
#window2 #btnlogin2:active {
    box-shadow: none;
}